<!DOCTYPE html>
<html lang="es">
	<head>
		<title>Aprendiendo jQuery</title>
		<script src="jquery-1.8.3.min.js"> </script>
		<script type="text/javascript">	
		function jqAnimate(){
			$(document).on('ready', function(){
				
				$('.jqCap18').css('margin', '0px auto');
				$('.box1').css('margin-bottom', '100px');
				//$('.box1').css('marginBottom', '100px');				
				
				$('#btJuntar').click(function(){
					$('.box1').animate({
						marginBottom:0,
						opacity:0.5
					}, 3000);
				});
				
				$('#btSeparar').click(function(){
					$('.box1').animate({
						marginBottom:100,
						opacity:1
					}, 3000);
				});
				
				
			});
		}
		</script>
		<style>
		.ejemplos {
			background: #f1f1f1;
			display: block;
			height: 100px;
			margin: 25px auto;
			width: 500px;
			border-radius: 0 50px 0 50px;
			overflow: auto;
			}
		
		.jqCap18{
			margin: 0px auto;
		}
		</style>
	</head>
	<body>
		<button id="btJuntar">Juntar</button>
		<button id="btSeparar">Separar</button>
		<div class="ejemplos jqCap18 box1"></div>
		<div class="ejemplos jqCap18 box2"></div>
		
		<!--
		http://www.bitstorm.org/jquery/color-animation/
		<script type="text/javascript" src="http://www.rfsouto.com/Scripts/capitulo17.js"></script>-->
		<script type="text/javascript">
		<!--
		jqAnimate();
		//-->
		
		</script>
	</body>
</html>